<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" ; xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/layui1/css/layui.css}" media="all"><title>Title</title>
    <script th:src="@{/layui1/layui.js}"></script>
    <style>
        body {
            margin: 10px;
        }
    </style>

</head>
<body>



<!-- 右操作栏 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-radius" lay-event="edit">查看/编辑</a>
    <a class="layui-btn layui-btn-radius layui-btn-danger" lay-event="del">删除</a>
</script>

<!-- 头操作栏 -->
<script type="text/html" id="toolbarDemo">
    <button class="layui-btn " lay-event="add">发布</button>
    <button class="layui-btn layui-btn-danger" lay-event="deletes">删除</button>
</script>

<!--===========================================添加部门信息==============================================================-->
<form class="layui-form" action="" id="save_add_form" style="display: none;margin: 10px" >
    <div class="layui-form-item" style="margin: 10px 0px 10px 0px">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                   class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">内容</label>
        <div class="layui-input-block">
            <textarea name="context" placeholder="请输入发布内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即发布</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!--===========================================更新部门信息==============================================================-->
<form class="layui-form" action="" id="update_notic_form" style="display: none;margin: 10px" lay-filter="example">
    <!--隐藏输入框，保存主键-->
    <input type="hidden" name="id">
    <div class="layui-form-item" style="display: none">
        <label class="layui-form-label">编号 </label>
        <div class="layui-input-block">
            <input type="text" name="id" required lay-verify="required"  autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-inline">
            <input type="text" name="title" required lay-verify="required"  autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">内容</label>
        <div class="layui-input-block">
            <textarea name="context"  class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateFormDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>



<!--=========================================================多条件查询================================================================-->
<fieldset class="table-search-fieldset">
    <legend>搜索信息</legend>
    <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" id="search">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-inline">
                        <input type="text" id="searchtitle" name="searchtitle" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">创建人</label>
                    <div class="layui-input-inline">
                        <input type="text" id="searchCreateBy" name="searchCreateBy" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-inline">
                        <input type="text" id="beginDate" name="beginDate" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-inline">
                        <input type="text" id="endDate" name="endDate" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="search_filter">
                        <i class="layui-icon"></i> 搜 索
                    </button>
                    <button class="layui-btn layui-btn-primary" lay-filter="search_reset"><i
                            class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</fieldset>


<!-- 数据表格 -->
<table id="notificationTable" lay-filter="test"></table>

</body>

<script>
    layui.use(['table', 'form', 'layer','laydate'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer, $ = layui.$;
        var laydate = layui.laydate;

        //执行table
        var mynotifi = table.render({
            elem: '#notificationTable'
            , url: '/notification/notificationList' //数据接口
            , id: 'tableReload'//利用id重载数据表格
            , title: '通知公告表'
            , toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , page: true //开启分页
            , skin: 'row'
            , even: true
            , size: 'lg'
            , limit: 10
            , limits: [10, 20, 30, 40, 50, 60]
            , cols: [
                [ //表头
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: '编号', width: '12%', align: 'center'}
                    , {field: 'title', title: '标题', width: '12%', align: 'center'}
                    , {field: 'context', title: '发布内容', width: '12%', align: 'center'}
                    , {field: 'createBy', title: '创建人', width: '12%', align: 'center'}
                    , {field: 'createTime', title: '创建时间 ', width: '12%', align: 'center'}
                    , {field: 'updateBy', title: '修改人', width: '12%', align: 'center'}
                    , {field: 'updateTime', title: '修改时间', width: '12%', align: 'center'}
                    , {fixed: 'right', title: '查看', width: '20%', align: 'center', toolbar: '#barDemo'}
                ]]
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    $("input[name='title']").val('');
                    $("input[name='context']").val('');
                    layer.open({
                        title: '添加通知公告',
                        type: 1,
                        content: $('#save_add_form'),
                        area: ['500px', '300px']
                    });
                    break;
                case 'deletes':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        //对于删除或者是其他敏感操作，一定要让用户确认。
                        layer.confirm('确定要删除吗？', function () {
                            //请求后台批量删除接口
                            $.ajax({
                                url: '/notification/deleteBatchNotices',
                                dataType: 'json',
                                contentType: "application/json;charset=UTF-8",
                                type: 'POST',
                                data: JSON.stringify(data),//将js对象转成json串传入到后台
                                success: function (result) {
                                    layer.closeAll();//关闭对话框
                                    layer.msg(result.msg);
                                    mynotifi.reload();//重新加载表格数据
                                }
                            })
                        })
                    }
                    break;
            };
        });
        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 的lay-filter="对应值"属性
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    //obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        url: '/notification/deleteNotice',
                        dataType: 'json',
                        type: 'get',
                        data: {"id": data.id},//将js对象转成json串传入到后台
                        success: function (result) {
                            layer.closeAll();//关闭对话框
                            layer.msg(result.msg);
                            mynotifi.reload();//重新加载表格数据
                        }
                    })
                });
            }else if (layEvent === 'edit') {
                //将修改前的数据赋值给修改表单
                form.val('example', {
                    "id": data.id,
                    "title": data.title // "name": "value"
                    , "context": data.context

                });

                layer.open({
                    title: '编辑标题',
                    type: 1,
                    content: $('#update_notic_form'),
                    area: ['600px', '500px']
                });
            }
        });
        //监听保存部门表单的提交
        form.on('submit(formDemo)', function (data) {
            //layer.msg(JSON.stringify(data.field));
            $.ajax({
                url: '/notification/saveNotification',
                dataType: 'json',
                type: 'POST',
                data: data.field,
                success: function (result) {
                    layer.closeAll();//关闭对话框
                    layer.msg(result.msg);
                    mynotifi.reload();//重新加载表格数据
                    //重置form表单
                    $("#save_add_form")[0].reset();
                }
            });
            return false;
        });

        //监听修改部门表单的提交
        form.on('submit(updateFormDemo)',function (data) {
            console.log(data.field);
            $.ajax({
                url: '/notification/updateNotification',
                dataType: 'json',
                type: 'POST',
                data:  data.field,
                success: function (result) {
                    layer.closeAll();//关闭对话框
                    layer.msg(result.msg);
                    mynotifi.reload();//重新加载表格数据
                }
            })
            return false;
        });


        //重置,多条件搜索form表单
        form.on('(search_reset)', function () {
            //重置form表单
            $("#searchForm")[0].reset();

            //刷新页面
            table.reload("tableReload");
        });

        //国际版
        laydate.render({
            elem: '#beginDate'
        });

        //国际版
        laydate.render({
            elem: '#endDate'
            ,lang: 'en'
        });

        //监听查询表单的提交事件
        form.on('submit(search_filter)', function (data) {
            var formData = data.field;
            var searchtitle = formData.searchtitle;
            var searchCreateBy = formData.searchCreateBy;
            var beginDate = formData.beginDate;
            var endDate = formData.endDate;
            //数据表格重载
            table.reload('tableReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {//这里传参  向后台
                    searchtitle: searchtitle,
                    searchCreateBy: searchCreateBy,
                    beginDate: beginDate,
                    endDate: endDate
                }
            });
            return false;//false：阻止表单跳转  true：表单跳转
        });
    });



</script>

</html>
